<form action ="" method ="post" id ="addcategory">

		
		<!-- start id-form -->
	<table align ="center" border="0" cellpadding="0" cellspacing="0"  id="id-form">
		<tr>
			<th valign="top">Category name:</th>
			<td><input type="text" class="inp-form" name ="name" value="{namevalue}" /></td>
			
					
			<td>
			<div class="error-left"></div>
			<div class="error-inner">{name}</div>
			</td>	
			
		</tr>
		<tr>
			<th valign="top">Category weight:</th>
			<td><input type="text" class="inp-form" name="weight" value="{weightvalue}" /></td>
			
			<td>
			<div class="error-left"></div>
			<div class="error-inner">{weight}</div>
			</td>	
			
		</tr>		 
		<tr>
			<th valign="top">Category status:</th>
			<td><input type="text" class="inp-form" name="status" value="{statusvalue}" /></td>
			<td>
			<div class="error-left"></div>
			<div class="error-inner">{status}</div>
			</td>	
			
		</tr>
		<tr>

			
			<td></td>
		</tr>


		<tr>
			<th>&nbsp;</th>
			<td valign="top">
				<input type="submit" value="" class="form-submit" name ="submit" />
				<input type="reset" value="" class="form-reset"  name ="reset" />
			</td>
			<td></td>
		</tr>
	</table>

</form>
<script>
$(document).ready(function(){
	$(".error-inner").each(function(){
		if($(this).html() == '') {
			$(this).css("visibility", "hidden");
			$(this).siblings(".error-left").css("visibility", "hidden");
		}
	});
		
 	
});
	$(document).ready(function(){		
	 	$("#addcategory").validate({
	    	rules: {
				name: { required: true },
				weight: { required: true, digits: true},
				status: {required: true,digits: true}
			},
			errorPlacement: function(error, element){		        
		        $(element).parent().next().children(".error-inner").html(error);				
			},
			//errorClass: "",
			highlight: function(element, errorClass) {
				$(element).parent().next().children(".error-left, .error-inner").css("visibility", "visible");
				$(element).removeClass("inp-form");
				$(element).addClass("inp-form-error");
			},
			unhighlight: function(element, errorClass) {
				$(element).parent().next().children(".error-left, .error-inner").css("visibility", "hidden");
				$(element).removeClass("inp-form-error");
				$(element).addClass("inp-form");
			},
		    
		});
	});
</script>